<template>
  <div class="loginWrapper">
    <div class="mainContent">
      <div class="widthSyncContainer">
        <div class="leftBG">
          <img
            src="@/assets/images/user/loginBg.png"
            alt="登录背景"
            class="bgImage"
          />
        </div>
      </div>
      <div class="login-form-container">
        <div class="login-header">
          <img src="@/assets/logo.png" alt="logo" class="logo" />
          <h1>RAIM ADS-B预测系统后台</h1>
        </div>
        <div class="login-container">
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            class="login-form"
          >
            <el-form-item prop="username">
              <el-input v-model="loginForm.username" placeholder="请输入用户名">
                <template #prefix>
                  <img
                    src="@/assets/images/user/PeopleIcon.png"
                    alt="请输入用户名"
                    class="custom-icon"
                  />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
              >
                <template #prefix>
                  <img
                    src="@/assets/images/user/UnlockIcon.png"
                    alt="请输入密码"
                    class="custom-icon"
                  />
                </template>
              </el-input>
            </el-form-item>

            <el-form-item prop="code" class="code-item">
              <el-input
                v-model="loginForm.code"
                placeholder="验证码"
                class="code-input"
              >
                <template #prefix>
                  <img
                    src="@/assets/images/user/ProtectIcon.png"
                    alt="验证码"
                    class="custom-icon"
                  />
                </template>
              </el-input>
              <img
                :src="captchaUrl"
                @click="getCaptchaImage"
                class="code-img"
              />
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                class="loginBtn"
                @click="loginFormHandle"
              >
                登录
              </el-button>
            </el-form-item>
            <div class="login-footer">
              <el-link
                @click="toForgotPassword"
                type="primary"
                class="linkA"
                style="float: left"
                >忘记密码？</el-link
              >
            </div>
          </el-form>
        </div>
      </div>
    </div>

    <div class="loginFooter">
      <div class="loginLeft">
        <div class="loginRightText">
          <h3>公告</h3>
          <!-- 第一组：标题+时间 -->
          <div class="notice-item">
            <div
              class="textLeft"
              data-index="0"
              :title="overflowStates[0] ? bulletinBoards.title1 : ''"
            >
              {{ bulletinBoards.title1 }}
            </div>
            <div class="textRight">{{ bulletinBoards.time1 }}</div>
          </div>
          <!-- 第二组：标题+时间 -->
          <div class="notice-item">
            <div
              class="textLeft"
              data-index="1"
              :title="overflowStates[1] ? bulletinBoards.title2 : ''"
            >
              {{ bulletinBoards.title2 }}
            </div>
            <div class="textRight">{{ bulletinBoards.time2 }}</div>
          </div>
          <!-- 第三组：标题+时间 -->
          <div class="notice-item">
            <div
              class="textLeft"
              data-index="2"
              :title="overflowStates[2] ? bulletinBoards.title3 : ''"
            >
              {{ bulletinBoards.title3 }}
            </div>
            <div class="textRight">{{ bulletinBoards.time3 }}</div>
          </div>
        </div>
      </div>
      <div class="loginRight">
        <div class="loginRightText">
          <h3>声明</h3>
          系统的输入为 FAA 和 USCoastGuard 提供的 NOTAM 和 NANU
          报文,不保证应用的报文与 GPS 卫星实际情况相一致, RAIM
          预测可能受到卫星的突发故障、电离层剧烈变化等多种不可预见因素的影响,这些因素无法及时反应到
          RAIM
          预测系统的输入,将可能导致预测结果与实际不符,系统不承担由此造成后果的法律责任;当使用该
          RAIM 系统辅助航班放行时,应取得满足 AC-91FS-01 或 AC-91-08 的使用许可。
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import { getCaptchaImageApi, noticesListLimitApi } from "@/api/user";
// import { ElMessage } from "element-plus";

const userStore = useUserStore();
const loginForm = reactive({
  username: "",
  password: "",
  code: "",
  uuid: "",
});
const bulletinBoards = reactive({
  title1: "",
  title2: "",
  title3: "",
  time1: "",
  time2: "",
  time3: "",
});

const overflowStates = ref({
  0: false,
  1: false,
  2: false,
});

const checkTextOverflow = (text, index) => {
  if (!text) {
    overflowStates.value[index] = false;
    return;
  }
  const el = document.querySelector(`.textLeft[data-index="${index}"]`);
  if (!el) {
    overflowStates.value[index] = false;
    return;
  }
  el.offsetWidth;
  const isOverflow = el.scrollWidth > el.clientWidth + 1;
  overflowStates.value[index] = isOverflow;
};

const router = useRouter();
const loginFormRef = ref();
const captchaUrl = ref("");

const loginRules = ref({});

onMounted(() => {
  getCaptchaImage();
  getNoticesListLimit();
  window.addEventListener("resize", handleResize);
});

const handleResize = () => {
  nextTick(() => {
    checkTextOverflow(bulletinBoards.title1, 0);
    checkTextOverflow(bulletinBoards.title2, 1);
    checkTextOverflow(bulletinBoards.title3, 2);
  });
};

onUnmounted(() => {
  window.removeEventListener("resize", handleResize);
});

const getCaptchaImage = async () => {
  const { code, data } = await getCaptchaImageApi();
  if (code === 200) {
    captchaUrl.value = "data:image/gif;base64," + data.img;
    loginForm.uuid = data.uuid;
  }
};

const getNoticesListLimit = async () => {
  const { code, data } = await noticesListLimitApi();
  if (code === 200) {
    bulletinBoards.title1 = data.list && data.list[0] && data.list[0].title;
    bulletinBoards.title2 = data.list && data.list[1] && data.list[1].title;
    bulletinBoards.title3 = data.list && data.list[2] && data.list[2].title;
    bulletinBoards.time1 = data.list && data.list[0] && data.list[0].updateTime;
    bulletinBoards.time2 = data.list && data.list[1] && data.list[1].updateTime;
    bulletinBoards.time3 = data.list && data.list[2] && data.list[2].updateTime;
  }
  nextTick(() => {
    checkTextOverflow(bulletinBoards.title1, 0);
    checkTextOverflow(bulletinBoards.title2, 1);
    checkTextOverflow(bulletinBoards.title3, 2);
  });
  // else {
  //   ElMessage({ message: msg, type: "warning" });
  // }
};

const loginFormHandle = () => {
  userStore
    .login(loginForm)
    .then((res) => {
      if (res.code && res.code === 200) {
        router.push("/page");
      }
    })
    .catch((error) => {
      console.error("登录接口报错详情：", error);
    });
};

const toForgotPassword = () => {
  router.push("/forgotpassword");
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.loginWrapper {
  width: 100%;
  min-width: 1280px;
  height: 100vh;
  min-height: 600px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px;
  box-sizing: border-box;
}

.mainContent {
  flex: 1;
  display: flex;
  overflow: hidden;
  margin-bottom: 16px;
  // align-items: center;
}

.widthSyncContainer {
  flex: 0 0 760px;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100vh - 190px);
}

.leftBG {
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex: 1;
}

.bgImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

.login-form-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  margin-left: 0;
  margin-top: -80px;
}

.custom-icon {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  object-fit: contain;
}

.code-item {
  width: 100%;
  overflow: hidden;
  padding-right: 0 !important;
}

.code-input {
  width: 60% !important;
  float: left;
}

.code-img {
  border: 1px solid #050d24;
  width: 35% !important;
  float: left;
  margin-left: 5%;
  height: 44px;
  border-radius: 12px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 12px;
  cursor: pointer;
}

.login-container ::v-deep .el-input__wrapper {
  width: 100% !important;
  height: 44px !important;
  flex-shrink: 0;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #050d24;
  backdrop-filter: blur(7.61834192276001px);
  box-shadow: none;

  .el-input__inner {
    font-size: 14px;
    color: #222 !important;
  }
}

.login-container {
  box-sizing: border-box;
  width: 380px;
  margin-top: 0px;
  min-height: 300px;
  margin: 0 auto;
}

.login-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.logo {
  width: 56px;
  height: 46px;
  margin-right: 10px;
}

.login-form {
  width: 100%;
  box-sizing: border-box;

  .el-form-item {
    margin-bottom: 22px;
  }
}

.loginBtn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #00afff 0.03%, #00539f 101.88%);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

.login-header h1 {
  font-weight: 800 !important;
  color: #222;
  font-size: 2.5rem;
}

.login-footer {
  margin-top: 10px;

  .linkA {
    color: #222;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 22px;
  }
}

.loginFooter {
  height: 136px;
  min-width: 1280px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  position: fixed;
  bottom: 16px;
}

.loginFooter .loginLeft {
  flex: 0 0 760px;
  box-sizing: border-box;
}

.loginFooter .loginRight {
  flex: 1 1 624px;
  padding-right: 16px;
  box-sizing: border-box;
}

.loginFooter .loginRightText {
  height: 100%;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  text-align: left;
  color: #222;
  background: #e5f0ff;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;

  .notice-item {
    display: flex;
    align-items: center; // 垂直居中对齐
    gap: 20px; // textLeft 与 textRight 中间间距 20px
    width: 100%; // 占满父容器宽度
  }

  h3 {
    font-weight: bold;
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 8px;
  }

  .textLeft {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
    text-align: left;
    cursor: default;
    color: #222;
  }

  .textRight {
    width: 140px; // 写死宽度
    min-width: 140px; // 防止收缩
    text-align: right;
    font-size: 12px;
    box-sizing: border-box;
    white-space: nowrap;
  }
}
</style>
